﻿@{
    Layout = null;
}

<html>
<head>
    <link href="~/res/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="~/res/css/style.css" rel="stylesheet" />
    <link href="~/res/css/colors/blue.css" id="theme" rel="stylesheet" />
    <script src="~/res/js/vue.min.js"></script>
    <script src="~/res/assets/plugins/jquery/jquery.min.js"></script>
    <script src="~/res/js/custom.min.js"></script>
    <link rel="icon" type="image/png" sizes="16x16" href="~/res/assets/images/favicon.png">
    <title>出库单打印</title>
</head>
<body>

    <div class="row" id="demo">
        <div class="col-md-12">
            <div class="card card-body printableArea">
                <h3><b>销售出库清单</b> <span class="pull-right">#{{TWO_DOC}}</span></h3>
                <hr>
                <div class="row">
                    <div class="col-md-12">
                        <div class="pull-left">
                            <address>
                                <h3> &nbsp;<b class="text-danger">{{TSC_NAME}}</b></h3>
                                <p class="text-muted m-l-5">
                                    <i class="fa fa-user-circle mx-sm-2"></i> {{TSC_LINKMAN}}
                                    <i class="fa fa-phone mx-sm-2"></i> {{TSC_LINKMOBILE}}
                                </p>
                            </address>
                        </div>
                        <div class="pull-right text-right">
                            <address>
                                <p class="m-t-30"><i class="fa fa-calendar mx-sm-2"></i> {{TWO_DATE_T}}</p>
                            </address>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="table-responsive m-t-40" style="clear: both;">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th class="text-center">#</th>
                                        <th>商品</th>
                                        <th class="text-center">单位</th>
                                        <th class="text-right">出库数量</th>
                                        <th class="text-right">单价</th>
                                        <th class="text-right">金额</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(x,index) in DataList">
                                        <td class="text-center">{{index+1}}</td>
                                        <td>{{x.TBG_NAME}} {{x.TBG_SPEC}}</td>
                                        <td class="text-center">{{x.TBG_NUIT}}</td>
                                        <td class="text-right">{{x.TWID_NUM}}</td>
                                        <td class="text-right">￥{{x.TWOD_PRICE}}</td>
                                        <td class="text-right">￥{{x.TWOD_MONEY}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>


                    <div class="col-md-12">
                        <div class="pull-right m-t-30 text-right">
                            <p v-if="TWO_AGR">合计金额: ￥{{SUM_MONEY}}</p>
                            <p v-if="TWO_AGR">优惠 : ￥{{DISCOUNT}} </p>
                            <hr v-if="TWO_AGR">
                            <h3><b>应付金额 :</b> ￥{{TWO_MONEY}}</h3>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">


        var vm = new Vue({
            el: "#demo",
            data: {
                DataList: [],
                TSC_NAME: "",
                TSC_LINKMAN: "",
                TSC_LINKMOBILE: "",
                TWO_DOC: "",
                TWO_DATE_T: "",
                SUM_MONEY: "",
                DISCOUNT: "",
                TWO_MONEY: "",
                TWO_AGR: true
            },
            mounted: function () {
                this.Query();
            },
            methods: {
                Query: function () {
                    $(".preloader").fadeIn();//加载等待
                    var _self = this;
                    _self.UserList = [];
                    $.post("../wms/OutPrint?act=data", { TWO_DID: GetUrlString("TWO_DID") },
                        function (data) {
                            data = JSON.parse(data);
                            console.log(data);
                            _self.TSC_NAME = data.data.TSC_NAME;
                            _self.TSC_LINKMAN = data.data.TSC_LINKMAN;
                            _self.TSC_LINKMOBILE = data.data.TSC_LINKMOBILE;
                            _self.TWO_DOC = data.data.TWO_DOC;
                            _self.TWO_DATE_T = data.data.TWO_DATE_T;
                            _self.SUM_MONEY = data.data.SUM_MONEY;
                            _self.DISCOUNT = data.data.DISCOUNT;
                            _self.TWO_MONEY = data.data.TWO_MONEY;
                            _self.TWO_AGR = data.data.TWO_AGR;

                            for (var i = 0; i < data.data1.length; i++) {
                                _self.DataList.push(data.data1[i]);
                            }

                            $(".preloader").fadeOut();//取消加载等待
                            setTimeout("vm.pr()", 500); 
                        });
                },
                pr: function () {
                    window.print();
                    window.close();
                }
            }
        });
    </script>

</body>
</html>

